<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style:none
		}
		    .list-image{
				margin-top: 20px;
				margin-bottom: 20px;
				border:1px solid black;
				padding-bottom: 10px;
			}
			.list-image ul{
				width: 100%;
				height: 100px;
			}
			.list-rank{
				overflow: hidden;
				border:1px solid transparent;
			}
			.rank li{
				float: left;
			}
			.rank-image{
				min-width: 100em;
				border: 1px solid black;
			}
			
			.rank-image li{
				float: left;
				width: 6em;
				height: 6em;
				border: 1px solid transparent;
			}
			.rank-image li img{
				width: 6em;
				height: 6em;
			}
			
			.rank-text{
				float: left;
				position: relative;
				width: 6em;
				min-height: 6em;
				border: 1px solid transparent;
			}
			.rank-text p{
				font-size: 2em;
				color: white;
				margin-top: 30%;
				text-align: center;	
			}
			.rank_s{
				background-color: #FF0000;
			}
			.rank_a{
				background-color: purple;
			}
			.rank_b{
				background-color: orange;
			}
			.rank_c{
				background-color: darkorange;
			}
			.rank_d{
				background-color: green;
			}
			.rank_e{
				background-color: blue;
			}
			.select{
				border: 1px solid blue;
			}
			.images{
				margin-top: 10px;
				border: 1px solid transparent;
				overflow: hidden;
			}
			.images li{
				float: left;
				width: 6em;
				min-height: 6em;
				border: 1px solid transparent;
			}
			.images li img{
				width: 6em;
				height: 6em;
			}
			.preSelect{
				border: 1px solid blue;
				opacity: 0.5;
			}
			
		</style>
	</head>
	<!-- 参照动漫排行榜制作的简单页面 
		主要功能：添加图片排列在下方，随后图片可以拖拽到排行榜上。
		排行榜暂时默认为s，a，b，c，d，e
	-->
	<body>
		<!-- 排行榜 -->
		<div class="list-rank">
			<ul class="rank">
				<li class="rank-li" ondragenter="allowRank(event)">
					<div class="rank-text rank_s"><p>S</p></div>
					<ul class="rank-image pos_s">
					</ul>
				</li>
				<li class="rank-li" ondragenter="allowRank(event)">
					<div class="rank-text rank_a"><p>A</p></div>
					<ul class="rank-image pos_a">
					</ul>
				</li>
				<li class="rank-li" ondragenter="allowRank(event)">
					<div class="rank-text rank_b"><p>B</p></div>
					<ul class="rank-image pos_b">

					</ul>
				</li>
				<li  class="rank-li" ondragenter="allowRank(event)">
					<div class="rank-text rank_c"><p>C</p></div>
					<ul class="rank-image pos_c">
					</ul>
				</li>
				<li class="rank-li" ondragenter="allowRank(event)">
					<div class="rank-text rank_d"><p>D</p></div>
					<ul class="rank-image pos_d">	
					</ul>
				</li>
				<li class="rank-li" ondragenter="allowRank(event)">
					<div class="rank-text rank_e"><p>E</p></div>
					<ul class="rank-image pos_e">
					</ul>
				</li>
			</ul>
		</div>
		<!-- 图片选择区 -->
		<div class="list-image">
			<input type="file" multiple accept="image/*"
			id="upload" name="uploader-input"/>
			<ul class="images pos_home"  ondragenter="allowSelect(event)">
		
			</ul>
		</div>
	</body>
	<script>
		var imageList = []
		var select_img = ''
		var img_pos = ''
		var currentAllowRank = ''
		var rankList= {rank_s:[],rank_a:[],rank_b:[],rank_c:[],rank_d:[],rank_e:[] }
		window.onload = function(){
			flushRank()
			flushImage()
		}
		// 节流
		var flag = true
		var throttle = function(func,delay){
			if(flag){
				flag = false
				var context = this
				var args = arguments
				setTimeout(function(){
					func.apply(context,args)
					flag = true
				},delay)		
			} 
		}
		
		// 刷新图片
		function flushImage(){
			loadImageUrl()
			var liTag = ''
			if(imageList.length){
				for(var i=0;i<imageList.length;i++){
					liTag +="<li><img class='imgs' draggable='true'"+
					 "ondragstart='selectImage(event)' ondragend='cancelImage()' src='"+
					imageList[i]
					+"'/></li>"
				}
			}
			document.getElementsByClassName('images')[0].innerHTML = liTag
		}
		// 选中图片经过选择区
		function allowSelect(eveny){
			event.preventDefault()
			currentAllowRank = event.target.classList[1]
		}
		// 选中图片经过排行榜
		function allowRank(event){
			event.preventDefault()
			event.stopPropagation()
			// 先删除之前的选中图片
			var delNode = document.querySelector('.preSelect')
			if(delNode){
				delNode.parentElement.removeChild(delNode)
			}
			// throttle(function(){
				var tar = event.target
				// 判定
				var classes = tar.classList
				if(classes.length){
					// 如果读取到了文字
					if(classes.length > 1 && img_pos != tar.classList[1]){
						currentAllowRank = tar.classList[1]
						preSelectImage(tar.parentNode.children[1])
					}
					switch(classes[0]){
						case 'rank-li':
							if(img_pos != tar.children[1].classList[1]){
								currentAllowRank = tar.children[1].classList[1]
								preSelectImage(tar.children[1])
							}
							break;
						case 'rank-image':
							if(img_pos != tar.classList[1]){
								currentAllowRank = tar.classList[1]
								preSelectImage(tar)
							}
							break;
						default:
							break;
					}
				}
				// },20)
		}
		function preSelectImage(target){
			var targetChildren = target.children;
			// 过滤
			var newInner = target.innerHTML.split('<li></li>')
			target.innerHTML = newInner.join('')
			if(target.innerHTML.includes('r-imgs')){
				target.innerHTML += "<li><img class='preSelect' src='"+
				select_img+"'/></li>"
				return
			}
			target.innerHTML = "<li><img class='preSelect' src='"+
				select_img+"'/></li>"

		}
		// 刷新排行榜
		function flushRank(){
			loadRank()
			if(!isRankListEmpty()){
				for(key in rankList){
					var liTag = ''
					var list = rankList[key]	
					for(var i=0;i<list.length;i++){
						liTag +="<li><img class='r-imgs' draggable='true'" 
						+"ondragstart='selectImage(event)' ondragend='cancelImage()' src='"+
						list[i]
						+"'/></li>"
					}
					document.getElementsByClassName(key)[0].parentNode.children[1].innerHTML = liTag
				}
			}
		}
		// 检测排行榜是否为空
		function isRankListEmpty(){
			if(rankList.rank_s.length && rankList.rank_a.length &&
			rankList.rank_b.length && rankList.rank_c.length && 
			rankList.rank_d.length && rankList.rank_e.length ){
				return true
			}else{
				return false
			}
		}
		// 加载排行榜
		function loadRank(){
			var ranklist = sessionStorage.getItem('rank')
			if(ranklist){
				rankList = JSON.parse(ranklist)
			}
		}
		// 保存排行榜
		function saveRank(){
			sessionStorage.setItem('rank',JSON.stringify(rankList))
		}
		// 保存图片路径
		function saveImageUrl(){
			sessionStorage.setItem('image',JSON.stringify(imageList))	
		}
		// 加载图片路径
		function loadImageUrl(){
			var imagelist = sessionStorage.getItem('image')
			if(imagelist){
				imageList = JSON.parse(imagelist)
			}
		}
		// 获取图片路径
		function getFullPath(file) {
			var url = "";
			 if(window.createObjectURL!=undefined)
			 {
			     url = window.createObjectURL(file);
			 }
			else if(window.URL!=undefined)
			 {
			    url = window.URL.createObjectURL(file);
			}
			else if (window.webkitURL != undefined)
			{
			    url = window.webkitURL.createObjectURL(file);
			}
			 return url;
		}
		// 图片上传获取
		document.getElementById('upload').addEventListener('change',function(event){
			var file = event.currentTarget
			var image = file.files
			if(image.length > 1){
				for(var i=0;i<image.length;i++){
					imageList.push(getFullPath(image[i]))
				}
			}else{
				imageList.push(getFullPath(image[0]))
			}
			saveImageUrl()
			flushImage()
		})
		// 切换图片
		function changeImg(){
			let newPos = 'rank_'+currentAllowRank.split('_')[1]
			let oldPos = 'rank_'+img_pos.split('_')[1]
			if(oldPos == 'rank_home'){
				if(imageList.includes(select_img)){
					imageList.splice(imageList.indexOf(select_img))
				}
			}else if(rankList[oldPos].includes(select_img)){
				rankList[oldPos].splice(rankList[oldPos].indexOf(select_img))
			}
			if(newPos == 'rank_home'){
				imageList.push(select_img)
			}else{
				rankList[newPos].push(select_img)
			}
			saveRank()
			saveImageUrl()
			flushRank()
			flushImage()
		}
		// 选中图片
		function selectImage(event){
			var selectNode = event.target.parentNode.parentNode
			select_img = event.target.src
			img_pos = selectNode.classList[1]
		}
		
		// 取消选中图片
		function cancelImage(){
			var delNode = document.querySelector('.preSelect')
			if(delNode) 
				delNode.parentElement.removeChild(delNode)
			if(currentAllowRank){
				if(currentAllowRank != img_pos){
					changeImg()
				}
			}
			select_img = ''
			img_pos = ''
			currentAllowRank = ''
		}
	</script>
</html>
